
var InlineEditor = (function($) {
	
	function openShippingEditor(elem){
		var catName = $(elem).attr('editor-category-name');
    	
    	BLC.ajax({url: '/fsquare/shipping/get?categoryName='+catName,
            type: "GET"
        }, function(data, extraData) {
        	
        	var form = "<div class='editor'><h2>"+data.categoryName+"</h2>";
        	var size = data.childCategories.length;
        	var childCategories = "<div><table cellspacing='5' cellspadding='5' border='1'><thead>" +
        			"<tr><th><span>Name</span></th>" +
        			"<th><span>Display Order</span></th>" +
        			"</tr></thead><tbody>";
        	var total = 0;	
        	for(var i = 0; i< size; i++){
        		var cat = data.childCategories[i];
        		childCategories += "<tr><td><span>"+cat.categoryName+"</span></td>";
        		childCategories += "<td><span>"+cat.displayOrder+"</span></td>";
        		childCategories += "</tr>";
        	}
        	
        	childCategories += "</tbody></table></div></div>";
        	form += childCategories;
        	
        	openModal(form, true);
        });
	}
	
	function openCategoryEditor(elem){
		var catName = $(elem).attr('editor-category-name');
    	
    	BLC.ajax({url: '/fsquare/category/get?categoryName='+catName,
            type: "GET"
        }, function(data, extraData) {
        	
        	var form = "<div class='editor'><h2>"+data.categoryName+"</h2>";
        	var size = data.childCategories.length;
        	var childCategories = "<div><table cellspacing='5' cellspadding='5' border='1'><thead>" +
        			"<tr><th><span>Name</span></th>" +
        			"<th><span>Display Order</span></th>" +
        			"</tr></thead><tbody>";
        	var total = 0;	
        	for(var i = 0; i< size; i++){
        		var cat = data.childCategories[i];
        		childCategories += "<tr><td><span>"+cat.categoryName+"</span></td>";
        		childCategories += "<td><span>"+cat.displayOrder+"</span></td>";
        		childCategories += "</tr>";
        	}
        	
        	childCategories += "</tbody></table></div></div>";
        	form += childCategories;
        	
        	openModal(form, true);
        });
	}
	
	function openProductInventoryUpdate(id, action){
		
		var date = new Date();
    	var windowId = date.getTime();
		
		var form = "<div id='"+windowId+"' class='editor'><div><form action='/fsquare/product/updateInventory'>" +
    	"<input type='hidden' name='productId' value='"+id+"' />"+
    	"<input type='hidden' name='inventoryAction' value='"+action+"' />"+
    	"<table cellspacing='5'><tr><td><label>Quantity: </label>" +
    	"</td><td><input name='quantity' value=''/>"+
    	"</td></tr><tr><td colspan='2'>" +
    	"<a class='submit' href='javascript:;' onclick=\"InlineEditor.saveProduct(this,function(data){$('#availableQuatity').val(data.quantity);$(\'#"+windowId+"\').remove();})\">"+action+"</a>"+
    	"</td></tr></table></form></div></div>";
    	
    	 openModal(form, false, '.edit-product-'+id);
	}
	
    function openProductEditor(elem){
    	var id = $(elem).attr('id');
    	
    	var res = id.split("product");
    	BLC.ajax({url: '/fsquare/product/get?productId='+res[1],
            type: "GET"
        }, function(data, extraData) {
	        	var ccc;
	        	
	        	var form = "<div class='editor'><div style='position:relative;float: left;' class='edit-product-"+data.productId+"'><form action='/fsquare/product/save'>" +
	        	"<input type='hidden' name='productId' value='"+data.productId+"' />"+
	        	"<table cellspacing='5'><tr><td><label>ID: </label></td>" +
	        	"<td><span class='edit-quantity'>"+data.productId+"</span>" +
	        	"</td></tr><tr><td><label>Name: </label></td><td>" +
	        	"<input name='name' value='"+data.name+"'/>"+
	        	"</td></tr><tr><td><label>Description: </label></td><td>" +
	        	"<textarea style='height: 180px; width: 550px' name='longDescription' >"+data.longDescription+"</textarea>"+
	        	"</td></tr><tr><td><label>Quantity: </label></td><td>" +
	        	"<input name='qt' disabled='disabled' id='availableQuatity' value='"+data.quantity+"' style='width: 40px;'/>" +
	        	"<div class='inventory-actions'><a class='add-to-inventory' href='javascript:;' onclick=\"InlineEditor.openProductInventoryUpdate('"+data.productId+"','add')\">+</a>" +
	        	"<a class='remove-to-inventory' href='javascript:;' onclick=\"InlineEditor.openProductInventoryUpdate('"+data.productId+"','remove')\">-</a></div>"+
	        	"</td></tr><tr><td></td></tr><tr><td colspan='2'>" +
	        	"<a class='submit' href='javascript:;' onclick='InlineEditor.saveProduct(this)'>save</a>"+
	        	"</td></tr></table></form></div>";
	        	
	        	
	        	var size = data.movements.length;
	        	var movements = "<div class='product-movements'><table cellspacing='5' cellspadding='5' border='1'><thead><tr><th><span>Id</span></th><th><span>quantity</span></th><th><span>updateDate</span></th><th><span>movementType</span></th><th><span>description</span></th><th><span>customer</span></th></tr></thead><tbody>";
	        	var total = 0;	
	        	for(var i = 0; i< size; i++){
	        		var movement = data.movements[i];
	        		if(movement.movementType == 'INCREMENT')
	        			total = total + parseInt(movement.quantity);
	        		else
	        			total = total - parseInt(movement.quantity);
	        		movements += "<tr><td><span>"+movement.id+"</span></td>";
	        		movements += "<td><span>"+movement.quantity+"</span></td>";
	        		movements += "<td><span>"+movement.updateDate+"</span></td>";
	        		movements += "<td><span>"+movement.movementType+"</span></td>";
	        		movements += "<td><span>"+movement.description+"</span></td>";
	        		movements += "<td><span>"+movement.customer+"</span></td></tr>";
	        	}
	        	movements += "</tbody>";
	        	movements += "<tfoot><tr><td><span>Total</span></td><td colspan='5'><span>"+total+"</span></td></tr></tfoot></table>";
	        	form += movements+"</div><div style='clear: both'/></div>";
//	        	console.log(form);
	        	openModal(form, true);
	        	
	    	});
    }
    
    function addField(name, label, value){
    	var field ="<tr><td><label>"+label+": </label></td><td>" +
    	"<input name='"+name+"' value='"+value+"'/>"+
    	"</td></tr><tr>";
    }
    
    function saveProduct(elem,callback){
    	$form = $(elem).closest('form');
    	var itemRequest = BLC.serializeObject($form);
    	
    	BLC.ajax({
    		url: $form.attr('action'), 
            type: "POST",
            dataType: "json",
            data: itemRequest,
        }, function(data, extraData) {
        	if(callback)
        		callback(data);
        });
    }
    
    
    function openModal(content, overlay, parent){
    	
//    	var date = new Date();
//    	var id = "window-overlay-"+date.getTime();
//    	var overlay = '<div class="window-overlay '+id+'"/>';
    	
    	var close = $("<a href='javascript:;' class='close-window'>×</a>");
    	close.on('click', function(){
    		var that = $(this);
    		var wind = that.closest('.window');
    		wind.fadeOut(200, function(){
    			that.remove();
    			wind.removeClass('window');
    			if(overlay)
    				$('.window-overlay').fadeOut(100);
    			wind.remove();
        	});
    	});
    	
    	var element = $(content);
    	
    	if(!parent)
    		parent = 'body';
    	$(parent).append(element);
    	
    	element.append(close);
    	element.addClass('window');
    	
    	
    	if(overlay){
    		$('.window-overlay').fadeIn(100, function(){
        		var height = element.height();
            	var width = element.width();
        		
            	var marginLeft = width/2;
            	var marginTop = height/2;
            	
            	element.css('marginLeft', '-'+marginLeft+"px");
            	element.css('marginTop', '-'+marginTop+"px");
            	
        		element.fadeIn(200);
        		element.draggable();
        	});
    	}else{
    		var height = element.height();
        	var width = element.width();
    		
        	var marginLeft = width/2;
        	var marginTop = height/2;
        	
        	element.css('marginLeft', '-'+marginLeft+"px");
        	element.css('marginTop', '-'+marginTop+"px");
        	
    		element.fadeIn(200);
    		element.draggable();
    		
    	}
    	
    }
    
    return {
    	openShippingEditor : openShippingEditor,
    	openProductEditor : openProductEditor,
    	openModal: openModal,
    	saveProduct:saveProduct,
    	openProductInventoryUpdate:openProductInventoryUpdate,
    	openCategoryEditor:openCategoryEditor
        
    };
})($);

$('.product-inline-edit').click(function() {
	InlineEditor.openProductEditor(this);
});

$('.category-inline-edit').click(function() {
	InlineEditor.openCategoryEditor(this);
});